<template lant="html">
  <div class="">
    <ul class="list-group col-sm-3">
      <router-link tag="li" class="list-group-item" to="/com/Base" active-class="act">
        组件的基本使用
      </router-link>
      <router-link tag="li" class="list-group-item" to="/com/Base2" active-class="act">
        父组件给子组件传参
      </router-link>
      <router-link tag="li" class="list-group-item" to="/com/toParent" active-class="act">
        子组件给父组件传参
      </router-link>
      <router-link tag="li" class="list-group-item" to="/com/is" active-class="act">
        使用is动态加载不同组件
      </router-link>
      <router-link tag="li" class="list-group-item" to="/com/slot" active-class="act">
        插槽功能
      </router-link>
      <router-link tag="li" class="list-group-item" to="/com/slotName" active-class="act">
        具名slot插槽功能
      </router-link>
      <router-link tag="li" class="list-group-item" to="/com/star" active-class="act">
        star组件开发
      </router-link>
    </ul>
    <div class="col-sm-9">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>

</script>
<style lang="css">
  .act {
    background: black;
    color: #ffffff;
  }
</style>
